// 取当前元素的下标
HTMLElement.prototype.index = function () {
    return index(this.previousElementSibling, 0);
    function index(element, count) {
        if (!element) { return count; }
        return index(element.previousElementSibling, count + 1);
    }

};

HTMLElement.prototype.Tabs = function () {
    var
        options = {
            // 这里保存所有的导航元素（保存的好处是其余地方可以直接操作，而不需要重复查找）
            navs: this.firstElementChild.children,
            // 这里保存所有的内容元素
            contents: this.lastElementChild.children,
            // 用来表示当前激活的菜单的下标
            index: null,
        },
        // 定义所有事件
        events = {
            onselect: function (index) {
                // 如果点击的是当前激活的菜单，不操作
                if (index !== options.index) {
                    if (null !== options.index) {
                        remove(options.navs[options.index]);
                        remove(options.contents[options.index]);
                    }

                    options.index = index;

                    add(options.navs[options.index]);
                    add(options.contents[options.index]);
                }
                function remove(element) { element.classList.remove('active'); }
                function add(element) { element.classList.add('active'); }
            }
        };


    this.firstElementChild.addEventListener('click', function (e) {
        ('LI' === e.target.nodeName) && events.onselect(e.target.index());
    });


    // 初始化打开第一个标签
    options.navs[0].click();

};


// 查找所有 .tabs 
Array.prototype.forEach.call(document.getElementsByClassName('tabs'), function (element) {
    element.Tabs();
});

